<template>
  <div>
    <searchBox @searchChange="searchChange" />
    <div class="gva-table-box">
      <lineChart ref="totalUser" :title="chartData.title" :legend="chartData.legend" :xAxis="chartData.xAxis" :series="chartData.series"> </lineChart>
    </div>
      <div class="gva-table-box">
      <div class="gva-btn-list"><el-text class="mx-1" size="large">用户平均时长</el-text></div>
          <el-table
          ref="multipleTable"
          style="width: 100%"
          tooltip-effect="dark"
          row-key="ID"
          :data="tableData"
          border
        >
  
          <el-table-column
            align="left"
            label="日期"
            prop="date"
          />
          <el-table-column
            align="left"
            label="新增(分钟)"
          >
          <template #default="scope">
              {{ scope.row.new_remain != '0.00' ? scope.row.new_remain : '-'}}
          </template>
          </el-table-column>
          <el-table-column
            align="left"
            label="次留(分钟)"
          >
          <template #default="scope">
              {{ scope.row.time_remain != '0.00' ? scope.row.time_remain : '-'}}
          </template>
          </el-table-column>
          <el-table-column
            align="left"
            label="三留(分钟)"
          >
          <template #default="scope">
              {{ scope.row.three_remain != '0.00' ? scope.row.three_remain : '-'}}
          </template>
          </el-table-column>
          <el-table-column
            align="left"
            label="七留(分钟)"
          >
          <template #default="scope">
              {{ scope.row.seven_remain != '0.00' ? scope.row.seven_remain : '-'}}
          </template>
          </el-table-column>
        </el-table>
      </div>
  </div>
  </template>
  <script lang="ts" setup>
  import { ref } from 'vue'
  import lineChart from '../../components/echarts/lineChart.vue';
  import searchBox from '../../components/search/searchBox.vue';
  import type { TabsPaneContext } from 'element-plus';
  import { sumByKey } from '../../utils/fmtData'
  
  import {
          getHugeList
  } from '@/api/openApi'
  
  let activeName = ref<string|number>('new')
    const handleClick = (tab: TabsPaneContext, event: Event) => {
    activeName = ref(tab.paneName)
    const td = JSON.parse(JSON.stringify(tableData.value))
    tableData.value = []
    setTimeout(() => {
      tableData.value = td
    }, 200);
  }
  
  // =========== 表格控制部分 ===========
  const tableData = ref([])
  const searchInfo = ref({})
  
  var searchChange = function(date) {
    searchInfo.value = date
    getTableData()
  }
  
  
  
  const chartData = ref({
  xAxis: [],
  series: [{
    name: '新增',
    type: 'line',
    data: []
  },{
    name: '次留',
    type: 'line',
    data: []
  },{
    name: '三留',
    type: 'line',
    data: []
  },{
    name: '七留',
    type: 'line',
    data: []
  }],
  legend: ['新增','次留','三留','七留'],
  title: '时长分析'
})
  const getTableData = async() => {
    const table = await getHugeList({ type:"cronDuration",...searchInfo.value })
    if (table.code == 0) {
      let arr = []
      let data = {}
      chartData.value.xAxis = []
    chartData.value.series[0].data = []
    chartData.value.series[1].data = []
    chartData.value.series[2].data = []
    chartData.value.series[3].data = []
      if(table.data.list.length > 0){
        table.data.list.forEach(item=>{
          let jsonData = JSON.parse(item.response)
          arr.push({
            date: item.date,
            new_remain: formatNumber(jsonData.newRemain / jsonData.newRemainTotal / 60),
            time_remain: formatNumber(jsonData.timeRemain / jsonData.timeRemainTotal / 60),
            three_remain: formatNumber(jsonData.threeRemain / jsonData.threeRemainTotal / 60),
            four_remain: formatNumber(jsonData.fourRemain / jsonData.fourRemainTotal / 60),
            five_remain: formatNumber(jsonData.fiveRemain / jsonData.fiveRemainTotal / 60),
            six_remain: formatNumber(jsonData.sixRemain / jsonData.sixRemainTotal / 60),
            seven_remain: formatNumber(jsonData.sevenRemain / jsonData.sevenRemainTotal / 60)
          })

          chartData.value.xAxis.push(item.date)
          chartData.value.series[0].data.push(formatNumber(jsonData.newRemain / jsonData.newRemainTotal / 60))
          chartData.value.series[1].data.push(formatNumber(jsonData.timeRemain / jsonData.timeRemainTotal / 60))
          chartData.value.series[2].data.push(formatNumber(jsonData.threeRemain / jsonData.threeRemainTotal / 60))
          chartData.value.series[3].data.push(formatNumber(jsonData.fourRemain / jsonData.fourRemainTotal / 60))
        })
        arr = sumByKey(arr,'date')
        tableData.value = arr
      }else{
        tableData.value = []
      }
     
    }
  }

const formatNumber = (num) => {
  if (isNaN(num)) {
    return 0;
  } else {
    return parseFloat(num.toFixed(2));
  }
}

</script>